---
slug: ../Avatar
---

import Basic from "../../_samples/main/Avatar/Basic/Basic.md";
import Interactive from "../../_samples/main/Avatar/Interactive/Interactive.md";
import WithBadge from "../../_samples/main/Avatar/WithBadge/WithBadge.md";
import ColorSchemes from "../../_samples/main/Avatar/ColorSchemes/ColorSchemes.md";
import Sizes from "../../_samples/main/Avatar/Sizes/Sizes.md";
import Shapes from "../../_samples/main/Avatar/Shapes/Shapes.md";
import WithImage from "../../_samples/main/Avatar/WithImage/WithImage.md";
import WithIcon from "../../_samples/main/Avatar/WithIcon/WithIcon.md";
import Styles from "../../_samples/main/Avatar/Styles/Styles.md";

<%COMPONENT_OVERVIEW%>

## Basic Sample
<Basic />

<%COMPONENT_METADATA%>

## More Samples

### Shapes
The Avatar comes in two shapes (Square and Circle).
<Shapes />

### Sizes
The Avatar comes in several sizes (S to XL).
<Sizes />

### Interactive
The Avatar can be interactive, e.g. responds to hover, focus and press.

<Interactive />

### Color Schemes
The Avatar can be dislpayed in multiple color schemes.

<ColorSchemes />

### With Icon
The Avatar can show icons.

<WithIcon />

### With Image
The Avatar can show images.
<WithImage />


### With Badge
The Avatar can show badge.

<WithBadge />

### Custom Styling
The Avatar allows customization with pure CSS on tag level.

<Styles />